
define(['zepto', 'butterfly/view','../../bsl',
    'text!./gallery.html'
], function($, View, bsl, gallery) {
    var me = null;

    var view = View.extend({
        events: {

            // ！！！！ 由于 引入 touch.js 后，tap事件会变成双击，所以 本页面内不能使用tap，用click代替。
            "tap #openDoc" : "openDoc",
            "tap #back" : "back",
             "tap #getImage" : "getImage",
             "tap #galleryImg" : "galleryImg",
              "tap #galleryImgs" : "galleryImgs",

      
        },
        render: function() {
            me = this;
        },

        onShow: function() {

            // 绑定自定义事件 滑动切换日历等           


        },
        bslReady:function (){
	// 用户侧滑返回时关闭显示的图片
			bsl.webview.currentWebview().addEventListener( "popGesture", function(e){
				if(e.type=="start"){
					this.closeImg();
				}
			}, false );
		},
		

		getImage:function (){
			var cmr = bsl.camera.getCamera();
			cmr.captureImage( function ( path ) {
				bsl.gallery.save( path );
				console.info( "照片已成功保存到系统相册" );
			}, function ( e ) {
				console.info( "取消拍照" );
			}, {filename:"_doc/gallery/",index:1} );
		},
		galleryImg:function () {
			// 从相册中选择图片
			console.info("从相册中选择图片:");
//		    bsl.gallery.pick( function(path){
//		    	outLine(path);
//		        //showImg( path );
//		        //createItem(path);
//		    }, function ( e ) {
//		    	console.info( "取消选择图片" );
//		    }, {filter:"image"} );
           bsl.gallery.pick( function(path){
                console.log("选择图片:" + path);
                //showImg( path );
                //createItem(path);
                }, function ( e ) {
                console.info( "取消选择图片" );
                }, {filter:"image",popover:{top:"10px",left:"10px",width:"200px",height:"200px"}} );
		},
		galleryImgs:function (){
			// 从相册中选择图片
			console.info("从相册中选择多张图片:");
		    bsl.gallery.pick( function(e){
		    	for(var i in e.files){
			    	outLine(e.files[i]);
		    	}
		    }, function ( e ) {
		    	console.info( "取消选择图片" );
		    },{filter:"image",multiple:true,popover:{top:"10px",left:"10px",width:"200px",height:"200px"}});
		},
		showImg:function ( url ){
			// 兼容以“file:”开头的情况
			if(0!=url.indexOf("file://")){
				url="file://"+url;
			}
			var _body_ = document.body;
			var _div_ = document.createElement("div");
			_div_.style.top="0px";
			_div_.style.left="0px";
			_div_.style.height="100%";
			_div_.style.width="100%";
			_div_.style.zIndex="99999";
			_div_.style.position="fixed";
			_div_.style.background="#ffffff";
			_div_.id="imgShow";
			_div_.onclick=this.closeImg;
			var _img_=document.createElement("img");
			_img_.src=url;
			_img_.style.width="100%";
			_body_.appendChild(_div_);
			_div_.appendChild(_img_);
		},
		closeImg:function (){
			var trnode=document.getElementById("imgShow");
			trnode&&trnode.parentNode.removeChild(trnode);
		},

		 list:null,first:null,
		
		createItem:function (path) {
			var li = document.createElement("li");
			li.className = "ditem";
			li.innerHTML = '<span class="iplay"><font class="aname"></font><br/><font class="ainf"></font></span>';
			li.setAttribute( "onclick", "displayMedia(this);" );
			list.insertBefore( li, first.nextSibling );
			var i = path.lastIndexOf("/");
			if(i<0){
				i = path.lastIndexOf("\\");
			}
			li.querySelector(".aname").innerText = path.substr(i+1);
			li.querySelector(".ainf").innerText = path;
			li.path = path;
			// 设置空项不可见
			first.style.display = "none";
		},
		// 清除列表记录
		cleanList:function () {
			list.innerHTML = '<li id="empty" class="ditem-empty">无记录</li>';
			empty = document.getElementById( "empty" );
			// 删除音频文件
			console.info( "清空选择照片记录：" );
		},
		// 返回后关闭图片显示
		 // _back:window.back,
		
		          back : function(e){
		          	this.closeImg();
		          	window.history.go(-1);
		        },
		        openDoc:function(){
		             window.butterfly.navigate('com.no5.cordovademo/doc/gallery', {
		                trigger: true
		            });


		        },
		        
		        
		             
		            });
    return view;
});
